<template>
  <view class="container">

    <block v-for="(item,index) in productList" :key="index">
      <view class="product-item">
        <view class="protuct-item-cover">
          <image src="http://via.placeholder.com/750x375" mode=""></image>
        </view>
        <view class="product-item-title">
          <text>{{item.title}}</text>
        </view>

        <view class="product-item-detail">
          <view class="">120元</view>
          <view style="padding-left: 20upx;">20人已经购买</view>
          <view class="operation">
            <view class="">
              <button type="primary" size="mini">购买</button>
            </view>
          </view>
        </view>
      </view>
      <view class="gap"></view>
    </block>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        productList: [{
            title: '商品标题1',

          },
          {
            title: '商品标题2',
          }
        ]
      }
    },
    onLoad() {

    },
    methods: {

    }
  }
</script>

<style>
  page {
    display: flex;
  }

  view {
    display: flex;
    flex-direction: row;

    /* border: solid 1upx;
    margin: 10upx; */
  }

  page {
    min-height: 100%;
  }

  .container {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .column {
    display: flex;
    flex-direction: column;
  }

  .gap {
    background-color: #eeeeee;
    height: 20upx;
    width: 100%;
  }

  .product-item {
    display: flex;
    flex-direction: column;

  }

  .protuct-item-cover {
    flex-direction: row;
    height: 375upx;
    flex: 1;

  }

  .protuct-item-cover image {
    width: 100%;
    height: 100%;
  }

  .product-item-title {
    font-size: 32upx;
    font-weight: bold;
    padding: 10upx;
  }

  .product-item-detail {
    align-items: center;
    padding-left: 10upx;
    padding-right: 10upx;
    padding-bottom: 20upx;
  }

  .product-item-detail>.operation {
    justify-content: flex-end;
    flex: 1;
  }
</style>
